| JavaScript导出图片和数据到Excel | 您所在的位置：网站首页 › 苹果IOS免拔卡抖音国际版TikTok 证书已更新 › JavaScript导出图片和数据到Excel |
JavaScript导出图片和数据到Excel
|
JavaScript导出图片和数据到Excel
以下方法可以利用json数据将图片地址生成图片导出到Excel，同样也可以将数据导出到Excel。解决网上许多方法关于导出图片到Excel却无法让图片在单元格内显示的问题，也解决了各类浏览器兼容问题。话不多少，先上车吧（哈哈） 1、目录结构将tHeader和tbody作为参数调用export2Excel函数，就可以导出Excel了。 导出图片和数据到Excel // tHeader和tbody的数据需要一一对应 let tHeader = [ '鲜花', '颜色', '照片' ] let tbody = [ { name: '玫瑰花', color: '红色', pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2801998497,4036145562&fm=27&gp=0.jpg' }, { name: '菊花', color: '黄色', pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1506844670,1837003941&fm=200&gp=0.jpg' }, { name: '牵牛花', color: '紫色', pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3056120770,1115785765&fm=27&gp=0.jpg' }, { name: '梅花', color: '白色', pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2700343322,3431874915&fm=27&gp=0.jpg' }, { name: '桃花花', color: '粉色', pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=602076004,4209938077&fm=27&gp=0.jpg' } ] export2Excel(tHeader, tbody, '我爱花朵') 3、导出的Excel表格如果在vue中使用的话，可以将export2Excel.js最后一个导出函数前面加上export，然后在使用的页面中将其导入就可以使用了。路径写自己目录中的路径 export2Excel.js文件 /* eslint-disable */ let idTmr; const getExplorer = () => { let explorer = window.navigator.userAgent; //ie if (explorer.indexOf("MSIE") >= 0) { return 'ie'; } //firefox else if (explorer.indexOf("Firefox") >= 0) { return 'Firefox'; } //Chrome else if (explorer.indexOf("Chrome") >= 0) { return 'Chrome'; } //Opera else if (explorer.indexOf("Opera") >= 0) { return 'Opera'; } //Safari else if (explorer.indexOf("Safari") >= 0) { return 'Safari'; } } // 判断浏览器是否为IE const exportToExcel = (data,name) => { // 判断是否为IE if (getExplorer() == 'ie') { tableToIE(data, name) } else { tableToNotIE(data,name) } } const Cleanup = () => { window.clearInterval(idTmr); } // ie浏览器下执行 const tableToIE = (data, name) => { let curTbl = data; let oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel let oWB = oXL.Workbooks.Add(); //获取workbook对象 let xlsheet = oWB.Worksheets(1); //激活当前sheet let sel = document.body.createTextRange(); sel.moveToElementText(curTbl); //把表格中的内容移到TextRange中 sel.select; //全选TextRange中内容 sel.execCommand("Copy"); //复制TextRange中内容 xlsheet.Paste(); //粘贴到活动的EXCEL中 oXL.Visible = true; //设置excel可见属性 try { let fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); } catch (e) { print("Nested catch caught " + e); } finally { oWB.SaveAs(fname); oWB.Close(savechanges = false); //xls.visible = false; oXL.Quit(); oXL = null; // 结束excel进程，退出完成 window.setInterval("Cleanup();", 1); idTmr = window.setInterval("Cleanup();", 1); } } // 非ie浏览器下执行 const tableToNotIE = (function() { // 编码要用utf-8不然默认gbk会出现中文乱码 let uri = 'data:application/vnd.ms-excel;base64,', template = '{table}', base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))); }, format = (s, c) => { return s.replace(/{(\w+)}/g, (m, p) => { return c[p]; }) } return (table, name) => { let ctx = { worksheet: name, table } //创建下载 let link = document.createElement('a'); link.setAttribute('href', uri + base64(format(template, ctx))); link.setAttribute('download', name); // window.location.href = uri + base64(format(template, ctx)) link.click(); } })() // 导出函数 const export2Excel = (theadData, tbodyData, dataname) => { let re = /http/ // 字符串中包含http,则默认为图片地址 let th_len = theadData.length // 表头的长度 let tb_len = tbodyData.length // 记录条数 let width = 40 // 设置图片大小 let height = 60 // 添加表头信息 let thead = '' for (let i = 0; i < th_len; i++) { thead += '' + theadData[i] + '' } thead += '' // 添加每一行数据 let tbody = '' for (let i = 0; i < tb_len; i++) { tbody += '' let row = tbodyData[i] // 获取每一行数据 for (let key in row) { if (re.test(row[key])) { // 如果为图片，则需要加div包住图片 // tbody += '根据实际开发需要，可以对导出函数进行相应的改动，比如向让表格生成编号，可以在导出函数里添加一行代码 这样就可以生成编号了 还可以通过改变width和height的大小得到相应大小的图片。
如果大家在使用的过程中遇到问题，可以给本同学留言，我们来一起探讨。这个导出方法为作者根据网络资料进行改进，如需转载，请联系博主。 |
【本文地址】
公司简介
联系我们